<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
  .box {
        width: 200px;
        height: 60px;
        border: 1px solid red;
    }
    </style>
  
</head>
<body>
    <script src="./jquery.js"></script>
    <div >jq点击发送请求</div>
    <button id="btn1">get 发送json（对象型数据）</button>
    <button id="btn2">post</button>
    <button id="btn3">通用型方法 ajax</button>
    <div class="box"></div>
    <script>
        // 一 jq发送get请求
        $('#btn1').click(function() {
            //data形参就是服务器响应客户端的数据显示
            $.get('http://localhost:3000/jq',{a:100,b:200},function(data) {
                // $('.box').html(data);
                console.log(data); //服务端响应给客户端的数据是对象类型
            },'json') //添加这个后   服务端响应给客户端的数据是对象类型
        })
        // 二 jq发送post请求
        $('#btn2').click(function() {
            //data形参就是服务器响应客户端的数据显示
            $.post('http://localhost:3000/jq',{a:100,b:200},function(data) {
                $('.box').html(data+'  我是post请求');
            })
        })
        //三 jq发送通用型 ajax请求
        $('#btn3').click(function() {
            //data形参就是服务器响应客户端的数据显示
            $.ajax({
                url: 'http://localhost:3000/jq', //url地址
                data: {a:100, b: 200}, // 请求参数
                type: 'get', // 请求类型
                dataType: 'json', //将服务端响应的数据为对象类型
                success: function(data) { //服务器响应的数据
                    console.log(data);
                },
                timeout: 2000, //如果数据响应超过2s，请求超时
                error: function() { //超时回调
                   alert('请求超时')
                },
                //请求头信息
                headers: {
                    c: 300,
                    d: 400
                }
            })
        })
    </script>
</body>
</html>